<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="changeMsg">点击更新msg</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "hello",
    };
  },
  methods: {
    changeMsg() {
      // Vue在更新数据时，不是直接更新dom，而是会开启一个异步任务队。为什么搞成异步。在排队的时候，它可以先去除掉重复的数据，避免一些不必要的计算和dom操作。
      this.msg = "itcast";
      // $nextTick会等页面dom更新完成之后，再执行回调函数中的代码
      // 比如实际开始时，有一些第三方库会操作dom，比如swiper轮播图插件，那就要注意和$nextTick的一个配合使用
      this.$nextTick(() => {
        let p = document.querySelector("p");
        console.log(p.innerHTML);
      });
    },
  },
};
</script>
<style>
</style>